<?php 
    include_custom("/views/header.php");
?>
<body>
<div id="container">
  <header id="header">
        <?php 
    include_custom("/views/header_menu.php");
?>
  </header>
  <div id="main" role="main" class="getting-start-profile">
    <article class="getting-start">
    	<div class="network">
        	<img src="skin/images/network-social-l_bg.png" width="3" height="24">
            <div class="sub-net">
                <a href="#"><img src="skin/images/facebook_icon.png" width="16" height="16" class="fb"></a>
                <a href="#"><img src="skin/images/twitter_icon.png" width="16" height="16" class="tw"></a>
            </div><!-- end .sub-net-->
            <img src="skin/images/network-social-r_bg.png" width="3" height="24">
        </div><!-- end .network-->

        <div class="ui-tabs content-bot">

            <div class="sitebar">
                <img src="skin/images/getting-sitebar-t_bg.png" width="247" height="3">
                <div class="sub-sitebar">
                    <label>Getting Started Contents</label>
                    <ul>
                        <li class="active">
                        	<img src="skin/images/doc-active_icon.png" width="12" height="16">
                        	<a href="#" class="active">Introduction</a>
                        </li>
                        <li>
                            <img src="skin/images/doc_icon.png" width="12" height="16">
                        	<a href="#">Authentication</a>
                        </li>
                        <li>
                        	<img src="skin/images/doc_icon.png" width="12" height="16">
                        	<a href="#">How It Works</a>
                        </li>
                    </ul>
                </div><!-- end .sub-sitebar-->
                <img src="skin/images/getting-sitebar-b_bg.png" width="247" height="3">
            </div><!-- end .sitebar-->  
            <div class="primary">
                	<label class="label1">Introduction</label>
                	<p>Mashape is an API marketplace where developers can distribute, manage, and consume APIs. We're a team of API fanatics focused on making your life easier putting back on our shoulders all the burden of distributing, maintaining and consuming an API.</p>
                    <label class="label2">If you're an API provider, we give you:</label>
                    <ul>
                        <li>Distribution into the marketplace, where thousands of developers are ready to hack your API. It's time to get viral!</li>
                        <li>A social layer on top of your API, to bring developer's experience to the next level</li>
                        <li>Auto-generated client libraries in five different languages, because distribution also means to lower the barriers for the consumers</li>
                        <li>Add-ons marketplace: it's not just about having an API, it's also about selling it, setting API request limits, and more to come</li>
                        <li>Soon in the next release:
                            <ul class="sub-elipse">
                                <li class="sub">Issues tab for submitting bugs</li>
                                <li class="sub">Support for existing authentications like OAuth</li>
                                <li class="sub">Easy "versioning" of an API with real-time notifcations to the existing consumers</li>
                            </ul>
                        </li>
                    </ul>
                        
                    <label class="label2">If you're an API consumer, we give you:</label>
                    <ul>
                        <li>Distribution into the marketplace, where thousands of developers are ready to hack your API. It's time to get viral!</li>
                        <li>A social layer on top of your API, to bring developer's experience to the next level</li>
                        <li>Auto-generated client libraries in five different languages, because distribution also means to lower the barriers for the consumers</li>
                        <li>Add-ons marketplace: it's not just about having an API, it's also about selling it, setting API request limits, and more to come</li>
                        <li>Soon in the next release:
                            <ul class="sub-elipse">
                                <li class="sub">Issues tab for submitting bugs</li>
                                <li class="sub">Support for existing authentications like OAuth</li>
                                <li class="sub">Easy "versioning" of an API with real-time notifcations to the existing consumers</li>
                            </ul>
                        </li>
                    </ul>
                    <label class="label3">Take an indept look</label>
                    <img src="skin/images/mobile-img.png" width="794" height="471" class="mobile">
                </div><!-- end .primary-->
             
      	</div><!-- end .ui-tabs-->
    </article>
  </div>
  <footer id="footer">
  
<?php
    include_custom("/views/footer.php");
?>
  </footer>
</div>
<!--! end of #container -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>


<!-- scripts concatenated and minified via ant build script-->
<script src="js/plugins.js"></script>

<script src="js/script.js"></script>

<!-- end scripts-->

<!--[if lt IE 7 ]>
	<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
	<script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
<![endif]-->

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	

		if (!$.browser.opera) {
    
			// select element styling
			$('select.select').each(function(){
				var title = $(this).attr('title');
				if( $('option:selected', this).val() != ''  ) title = $('option:selected',this).text();
				$(this)
					.css({'z-index':10,'opacity':0,'-khtml-appearance':'none'})
					.after('<span class="select">' + title + '</span>')
					.change(function(){
						val = $('option:selected',this).text();
						$(this).next().text(val);
						})
			});

		};
		
	});
</script>

<script type="text/javascript">
$(document).ready(function () {
$('#tabs').tabs();
});
  </script>
</body>
</html>